<template>
	<view class="myOrder-detail">
		<view class="ban">
			<view class="name">
				<text class="title">{{ username }}</text>
				<text class="iconfont icon-gengduo"></text>
				<!-- <text class="iconfont icon-shijian"></text> -->
			</view>
			<view class="time">
				<text class="iconfont icon-shijian"></text>
				<text class="">{{ date }} {{ time }}</text>
			</view>
			<view class="type">
				<text class="iconfont icon-fapiao"></text>
				<text class="">{{ get }}</text>
			</view>
			<button @click="addDate(date)">+加入手机日历</button>
		</view>
		<view class="ban mid">
			<view class="tip">
				<text>预约码</text>
				<text>(向工作人员出示进行核销)</text>				
			</view>
			<!-- <view class="iconfont icon-erweima"></view> -->
			<!-- <image :src="qrCodeBase64" mode="aspectFit"></image> -->
			<!-- <image src="../../static/uni.png" class="code" mode=""></image> -->
			<view class="canvas">
			    <!-- 二维码插件 width height设置宽高 -->
			    <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
			</view>
			<!-- <text class="list-text">{{ '预约号码:' + ' ' + myFormatData.yyh}}</text>
			<text class="list-text"> {{ '预约窗口:' + '  ' + myFormatData.bsdmc}}</text>
			<text class="list-text"> {{ '业务类型:' + '  ' + myFormatData.Yylxmc}}</text>
			<text class="list-text"> {{ '预约日期:' + '  ' + myFormatData.yyrq}}</text> -->
		</view>
		<view class="ban bottom">
			<view class="title">
				预约信息
			</view>
			<view class="info">
				<view class="username">
					<text>姓名： </text><text>{{username}}</text>
				</view>
				<view class="username">
					<text>手机号： </text><text>{{phone}}</text>
				</view>
				<view class="hx" @click="goCheck">
					自主核销
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	// 引入qrcode库
	import uQRCode from '../../uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	import { FindByTelphone, CheckoutCode } from '../../api/index.js'
	export default {
		data() {
			return {
				username:'',
				date:'',
				time:'',
				status:'',
				phone:'',
				id:'',
				
				// 二维码标识串
				qrcodeText: '',
				// 二维码尺寸
				qrcodeSize: 150,
				// 最终生成的二维码图片
				qrcodeSrc: '',
			 //    myFormatData: {
				// 	'yyh': 'eoruw20230528',
				// 	'bsdmc': '窗口1',
				// 	'Yylxmc': '租金缴纳',
				// 	'yyrq': '预约日期'
				// },
				myFormatData: {
					username: '',
					tel: '',
					time: '',			
				}
			};
		},
		onLoad(options) {
			
			console.log(options,'opt')
			if(options){
				this.username = options.username
				this.date = options.date
				this.time = options.time
				this.phone = options.phone
				this.status = options.status
				this.id = options.id
				this.qrcodeText = this.username+'_'+this.status+'_'+this.date+'_'+this.id+'_'+this.phone
			}
			
			this.make();
		},
		computed:{
			get(){
				let tp = this.status
				if(tp==1) {
					return '可使用'
				}
				if(tp==2) {
					return '已核销'
				}
				if(tp==3) {
					return '已过期'
				}
				if(tp==4) {
					return '系统取消'
				}
			}
		},
		methods:{
			addDate(date){
				uni.switchTab({
					url:'/pages/orderDate/orderDate?date='+date
				})
			},
			make() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

			uQRCode.make({
				canvasId: 'qrcode',
				text: this.qrcodeText,
				size: this.qrcodeSize,
				margin: 10,
				success: res => {
					this.qrcodeSrc = res
					console.log('qrcodeSrc = ' + this.qrcodeSrc);
				},
				complete: () => {
					uni.hideLoading()
				}
				})
			},
			
			getType(tp){
				if(tp==1) {
					return '可使用'
				}
				if(tp==2) {
					return '已核销'
				}
				if(tp==3) {
					return '已过期'
				}
				if(tp==4) {
					return '系统取消'
				}
			},
			// 核销
			goCheck(){
				console.log('res,','ress')
				// uni.scanCode({
				// 	scanType:'qrCode',
				// 	success:function(res){
				// 		console.log(res,'ress')
				// 	}
				// })
				// 允许从相机和相册扫码
				uni.scanCode({
					// scanType:'qrCode',//无反应
					scanType:['qrCode'],
					success: async (res)=> {
						// this.qrcodeText = this.username+' '+this.type+' '+this.date+' '+this.myFormatData.username+' '+this.myFormatData.tel
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let results = res.result.split('_')
						console.log(results,'results')
						const { data:res1 } = await FindByTelphone(this.phone)
						console.log(res1,'res1')
						res1.data.forEach(item=>{
							console.log(item.id,results[3],'ddf')
							if(item.id==results[3]){
								console.log('tttt')
								if(item.status==2){
									return uni.showToast({
										title:'已核销',
										icon:'error'
									})
								}
								if(item.status==3){
									return uni.showToast({
										title:'已过期',
										icon:'error'
									})
								}
								if(item.status==4){
									return uni.showToast({
										title:'系统取消',
										icon:'error'
									})
								}
							// const { data:res } =  CheckoutCode({phone:this.phone,status:2})
							CheckoutCode({phone:this.phone,status:2,id:this.id}).then(res=>{
								console.log(res,'ccc')
								if(res.data.status==0){
									return uni.showToast({
										title:'核销成功',
										icon:'success'
									})
								}
							})
							
						}
						// else{
						// 	console.log('eeee')
						// 	return uni.showToast({
						// 		title:'查询失败未找到',
						// 		icon:'fail'
						// 	})
						// }
						}
						)
						// if(results[0]==res1.data.username){
							
						// 	if(res1.data.status==2){
						// 		return uni.showToast({
						// 			title:'已核销',
						// 			icon:'error'
						// 		})
						// 	}
						// 	if(res1.data.status==3){
						// 		return uni.showToast({
						// 			title:'已过期',
						// 			icon:'error'
						// 		})
						// 	}
						// 	if(res1.data.status==4){
						// 		return uni.showToast({
						// 			title:'系统取消',
						// 			icon:'error'
						// 		})
						// 	}
						// 	const { data:res } = await CheckoutCode({phone:2,status:2})
						// 	console.log(res,'ccc')
						// 	if(res.status==0){
						// 		return uni.showToast({
						// 			title:'核销成功',
						// 			icon:'success'
						// 		})
						// 	}
						// }else{
						// 	return uni.showToast({
						// 		title:'查询失败未找到',
						// 		icon:'fail'
						// 	})
						// }
						}
					
				});
			}
		}
	}
</script>

<style lang="scss">
.myOrder-detail{
	padding: 30rpx;
	.ban{
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.name{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-weight: bold;
				font-size: 40rpx;
			}
			// font-weight: bold;
			.iconfont{
				// width: 10rpx;
				// font-size: 30rpx;
			}
		}
		.time{
			margin: 40rpx 0 10rpx 0;
			.iconfont{
				margin-right: 10rpx;
			}
		}
		.type{
			margin: 0rpx 0 40rpx 0;
			.iconfont{
				margin-right: 10rpx;
			}
		}
		button{
			width: 40%;
			font-size: 28rpx;
			background: #1afa29;
			color: #fff;
		}
		&.mid{
			// border: 1px solid #000;
			text-align: center;
			.tip{
				
			}
			.canvas{
				width: 260rpx;
				// border: 1px solid #000;
				text-align: center;
				margin: 50rpx auto;
			}
			.list-text{
				display: inline-block;
			}
			.code{
				width: 330rpx;
				height: 330rpx;
				margin-top: 20rpx;
			}
		}	
		&.bottom{
			// border: 1px solid #000;
			text-align: center;
			.title{
				font-weight: bold;				
			}
			.info{
				width: 100%;
				// display: flex;
				text-align: left;
				line-height: 60rpx;
				.username{
					width: 100%;
					
				}
				
			}
			
		}	
		
		
	}
	.icon-erweima{
		width: 300px;
	}
}
</style>
